<template>
  <a-card>
    <div
      @cancel="cancel"
      :width="1200"
      :height="1000">
      <div layout="inline">
        <a-row :gutter="24">
          <a-col :span="6" class="tree-container">
            <a-tree
              show-search
              :dropdown-style="{ maxHeight: 400, overflow: 'auto' }"
              :allow-clear="true"
              :tree-default-expand-all="true"
              :tree-data="unitTree"
              @select="onSelect"
              :selected-keys="[unitId]"
              :replaceFields="replaceFields"
              :expandedKeys="expandKeys"
              @expand="expand"
            />
          </a-col>
          <a-col :span="18">
            <a-form-item label="单位名">
              <a-input v-model="inputKey" allow-clear placeholder="请输入单位名" style="display: inline-block"/>
            </a-form-item>
            <a-card>
              <a-button type="primary" @click="selectByKey">查询</a-button>
              <a-button style="margin-left: 8px" type="primary" icon="plus" @click="$refs.addOrgForm.add()">新增单位</a-button>
              <s-table
                ref="table"
                :columns="columns"
                :data="loadData"
                :alert="null"
                :rowKey="(record) => record.organizationId"
                :rowSelection="null"
                bordered
              >

                <span v-if="record.organizationName !== '交叉方单位'" slot="action" slot-scope="text, record" style="display: flex; justify-content: space-between; gap: 1px;">
                  <a-button size="small" style="color: #1d39c4;background-color: #f0f5ff;border-color: #adc6ff;">
                    <a @click="$refs.fbEditForm.edit(record)">
                      <a-icon type="edit" /> 编辑
                    </a>
                  </a-button>
                  <a-button size="small" style="color: #d4380d;background: #fff2e8;border-color: #ffbb96;">
                    <a @click="handleDeleteData(record)">
                      <a-icon type="delete" /> 删除
                    </a>
                  </a-button>
                </span>
              </s-table>
              <add-org-form ref="addOrgForm" @ok="handleOk1()"></add-org-form>
              <fb-edit-form ref="fbEditForm" @ok="handleOk2()"></fb-edit-form>
            </a-card>
          </a-col>
        </a-row>
      </div>
    </div>
  </a-card>
</template>

<script>
  import {
    getUnitTree1,
    getfabaoListWithName,
    FbdelData
  } from '@/api/modular/system/violationManage'
  import addOrgForm from './addOrgForm'
  import fbEditForm from './fbEditForm'
  import { STable, XCard, XDown } from '@/components'
  import { Modal, Table, Drawer, Checkbox } from 'ant-design-vue'
import FbEditForm from './fbEditForm.vue'
//   import { mapGetters } from 'vuex'
  const Util = {}
  Util.getIds = function (data) {
    const arr = []
    data.length && data.forEach((item) => {
      if (item.children && item.children.length) {
        arr.push(item.id)
        // item.children.forEach((item) => {
        //   arr.push(item.id)
        // })
      }
    })
    return arr
  }
  export default {
    components: {
      XDown,
      XCard,
      STable,
      Modal,
      Table,
      Drawer,
      Checkbox,
      addOrgForm,
      fbEditForm,
        FbEditForm
    },
    // computed: {
    //   rowSelection() {
    //     return {
    //       type: 'radio', // 单选按钮定义
    //       selectedRowKeys: [this.selectedRowKeys],
    //       onChange: (selectedRowKeys, selectedRows) => {
    //         this.setSelectResult(selectedRowKeys, selectedRows)
    //       }
    //     }
    //   }
    // //   ...mapGetters(['userInfo'])
    // },
    data() {
      return {
        Util,
        expandKeys: [],
        queryId: {
          id: ''
        },
        secondOraName: {
          id: ''
        },
        unitName: '',
        // userId: 0,
        visible: false,
        peopleList: [],
        title: '',
        inputKey: '',
        unitId: '',
        selectedName: null,
        selectedRowKeys: [],
        selectedRows: [],
        columns: [
          {
            title: '单位名',
            dataIndex: 'organizationName'
          },
          {
            title: '单位路径',
            dataIndex: 'namePath',
            customRender: function(text) {
              return text.replace(/_/g, '/')
            }
          }
        ],
        loadData: (parameter) => {
          // console.log('hhhh:', parameter)
          return getfabaoListWithName(Object.assign(parameter, this.queryParam)).then((res) => {
            this.selectedRowKeys = []
            // console.log(res.data)
            res.data.rows.forEach(item => {
              // 在这里进行每个元素的操作
              if (item.unitId === this.unitId) {
                this.selectedRowKeys = item.unitId
                return res.data
              }
            })
            return res.data
          })
        },
        pagination: {
          total: 0,
          defaultPageSize: 20,
          showTotal: total => `共 ${total} 条数据`,
          showSizeChanger: true,
          pageSizeOptions: ['5', '10', '15', '20']
          // onShowSizeChange: (current, pageSize) => this.pageSize = pageSize
        },
        queryParam: {},
        treeLoading: true,
        unitTree: [],
        fabaotree: {
            id: '00'
        },
        replaceFields: {
          key: 'id'
        }
      }
    },
    created() {
      // console.log('进入了created')
    //   this.secondOraName.id = this.userInfo.secondOrganizationName
      this.getunitTree()
      this.columns.push({
      title: '操作',
      width: '200px',
      dataIndex: 'action',
      scopedSlots: { customRender: 'action' }
    })
    },
    methods: {
      getunitTree() {
        // 获取违章单位树
        getUnitTree1(Object.assign(this.fabaotree)).then(res => {
          // console.log('进入了接口内部')
          this.treeLoading = false
          this.unitTree = res.data
          this.expandKeys = Util.getIds(res.data)
          // console.log('expandKeys:', this.expandKeys)
          // console.log('tree:', res.data)
        })
      },
      handleDeleteData(record) {
        const param = [{ id: record.organizationId }]
        FbdelData(param).then((res) => {
          if (res.success) {
            this.$message.success('删除成功')
            this.$refs.table.refresh()
            this.getunitTree()
          } else {
            this.$message.error('删除失败')
          }
        })
        .catch(() => {
          this.$message.error('删除错误')
        })
      },
      handleOk1() {
        this.$refs.table.refresh()
        this.getunitTree()
      },
      handleOk2() {
        this.$refs.table.refresh()
        // console.log('子组件点击了确定')
        this.getunitTree()
      },
      expand(e, item) {
        // console.log('出发了expand')
        // console.log(e, item)
        this.expandKeys = e
      },
      onShowSizeChange(current, pageSize) {
        this.pageSize = pageSize
      },
      cancel() {
        this.$emit('cancel')
      },
      onSelect(selectedKeys, e) {
        // const selectedNode = e.selectedNodes[0]
        if (selectedKeys.length > 0) {
          // 将选中的树节点ID存入unitid中
          this.unitId = selectedKeys[0]
          // this.unitName = selectedNode.data.props.title
          // console.log(selectedNode.data.props.title)
        } else {
          this.unitId = null
          this.unitName = null
        }
        this.queryParam.OrganizationName = this.inputKey
        this.queryParam.OrganizationId = this.unitId
        this.queryParam.ParentId = this.unitId
        this.$refs.table.refresh()
        this.unitId = null
        this.unitName = null
      },
      selectByKey() {
        this.queryParam.OrganizationName = this.inputKey
        this.$refs.table.refresh()
      }

    }
  }
</script>

<style lang="less" scoped>
::v-deep .ant-table-tbody tr:nth-child(2n) {
  background-color: #f5f5f5;
}

.tree-container {
   height: 720px;
  overflow-y: auto;
}

</style>
